본문으로 건너뛰기

주소창에 https://www.naver.com 과 같은 다양한 url 을 접속하게 되면 어떤 동작 원리로 우리가 입력한 페이지로 이동하게 되는 것일까?

브라우저란?

웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어 입니다.

브라우저의 주요 기능​

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

웹 브라우저의 종류는 다양하다. 크롬, 네이버 웨일, 파이어 폭스, 사파리 등이 대표적인 예입니다.

브라우저의 구조

브라우저의 구조

  1. 사용자 인터페이스

    사용자가 접근할 수 있는 영역입니다. URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 창에 제외한 나머지 모든 부분입니다.

  2. 브라우저 엔진

    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 합니다.

  3. 렌더링 엔진

    웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타냅니다. 예를 들어 HTML문서를 응답받으면 HTML과CSS를 파싱하여 화면에 표시합니다. 브라우저의 동작 원리를 이해하려면 렌더링 엔진의 이해가 중요합니다.

    브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생성 된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다.

  4. 통신

    HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용됩니다.

  5. UI 백엔드

    select, input 등 기본적인 위젯을 그리는 인터페이스 입니다.

  6. 자바스크립트 해석기

    자바스크립트 코드를 해석하고 실행합니다.

  7. 자료 저장소

    Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역입니다.

렌더링 엔진

“렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진입니다.”

  • 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있습니다.

예를 들어 인터넷 도구 Elments 탭에서 아래와 같은 코드를 본 적이 있을것이다.

-moz-border-radius: 1em; // 파이어폭스 브라우저에 적용
-ms-border-radius: 2em; // 익스플로어에 적용, 보통 생략
-o-border-radius: 3em; // 오페라에 적용
-webkit-border-radius: 4em; // 구글, 사파리 브라우저에 적용

렌더링 엔진의 종류는 아래와 같다.

  • Blink - 크롬, 오페라 ( 구글이 Webkit을 대체하기 위해 자체적으로 개발)

  • Webkit - 사파리

  • Trident - 익스플로어

  • EdgeHTML - 마이크로소프트 엣지

렌더링 엔진 동작 과정

렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작합니다. 이 문서의 내용은 보통 8KB 단위로 전송됩니다.

  • 렌더링 엔진의 기본적인 동작 과정

렌더링 엔진의 기본동작과정

  1. 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축합니다. (DOM)
  2. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다. (CSSOM)
  3. DOM 트리와 2번의 결과물을 합쳐 렌더트리를 구축합니다.
  4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정합니다.
  5. UI 백엔드에서 렌더 트리의 각 노드를 그립니다.

  • 렌더링 엔진 중 하나인 웹킷 엔진에 나타낸 그림

    webkit engine

    동작 과정의 순서는 위에서 설명한 기본 동작 과정가 유사합니다.

1️⃣ HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구축합니다.​

  • DOM은 마크업과 1:1 관계를 성립합니다.
<html>
	<body>
		<p>안녕!!</p>
		<div><img src="example.png" /></div>
	</body>
</html>

위와 같은 코드는 아래와 같은 DOM 트리로 변환할 수 있습니다.

DOM tree

브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성합니다. 생성된 파싱 트리를 기반으로 DOM 트리를 생성합니다.

2️⃣ CSSOM(Css Object Model)을 생성합니다.​

CSSOM

CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함합니다. CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함합니다.

3️⃣ 렌더 트리(DOM + CSSOM)를 생성합니다.​

DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성합니다. 렌더 트리는 문서를 시각적인 구성요소로 만들어주는 역할을 합니다.

웹킷은 이 구성 요소를 “렌더러(rendere)” 또는 “렌더 객체(render object)”라는 용어를 사용합니다. 렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있습니다.

렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아닙니다.

그 이유는 <head>, display:'none'와 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않습니다. (visibility 속성에 "hidden" 값이 할당된 요소는 트리에 나타납니다.

render tree

4️⃣ 렌더 트리를 배치합니다. (레이아웃: Layout)​

렌더 트리는 위치와 크기를 가지고 있지 않기 때문에, 어느 공간에 위치해야 할지 각 객체들에게 위치(position)와 크기(size)를 결정해줍니다.

5️⃣ 렌더 트리를 그립니다.​

렌더 트리가 만들어져 레이아웃이 구성되었으면 UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀(px) 값으로 나타냅니다.

그렇다면 자바스크립트는??????​

지금까지는 HTML 문서를 파싱하여 HTML과 CSS를 렌더링 엔진에서 처리하는 과정을 알아봤습니다. 위의 과정만으로도 웹 페이지를 화면에 나타내는 것은 충분합니다!

하지만 Javascript는 어떻게 처리가 될까요?

  • Javascript 또한 렌더링 엔진에서 처리가 될까??!

아닙니다.

자바스크립트는 자바스크립트 엔진이 처리합니다. HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘깁니다. 제어 권한을 넘겨받은 자바스크립트 엔진은 <script>태그 내의 Javascript 코드 또는 src속성에 정의된 Javascript파일을 로드하고 파싱하여 실행합니다.

Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개합니다.

render engine

이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리합니다. 하지만 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 어떻게 될까요? 당연히 에러가 발생하겠죠.

이것이 HTML 파일에서 Javascript 코드를 <body> 태그 하단에 위치시키는 이유입니다.